<template>
  <div class="cart-content">
    <ul class="cart-item" v-for="item in list" :key="item.id">
      <li><input @change="onChange(item)" type="checkbox" v-model="item.checked" /></li>
      <li><img :src="item.img" alt="" /></li>
      <li>名称：{{ item.goodsName }}</li>
      <li>数量：{{ item.count }}</li>
      <li>价格：{{ item.price }}</li>
      <li>
        <!-- 直接在组件中间传递数据的方式，可以使用vue的插槽 -->
        <BaseButton @click="handleAddClick(item)">{{ '+' }}</BaseButton>
        <BaseButton @click="handleReduceClick(item)">{{ '-' }}</BaseButton>
        <!-- <span class="btn">{{ '+' }}</span>
        <span>{{ '-' }}</span> -->
      </li>
    </ul>
  </div>
</template>

<script>
import BaseButton from './Button.vue'
export default {
  // 不能直接在子组件内部操作props。必须通知父亲组件，让父组件
  components: { BaseButton },
  props: {
    list: {
      type: Array,
    },
  },
  methods: {
    handleAddClick(item) {
      item.count++
      console.log('add-click')
    },
    onChange(item) {
      // console.log('监听每一条数据', item)
      // console.log(this.list, 'list')
      this.$emit('onChange', item)
    },
    handleReduceClick(item) {
      if (item.count <= 1) {
        if (window.confirm('确定删除吗？')) {
          this.$emit('onRemoveItem', item)
        }
        return
      }
      item.count--
    },
  },
}
</script>

<style lang="scss">
.cart-item {
  padding: 10px;
}
</style>
